<template>
  <div>
    <el-card :body-style="{ padding: '0px' }" style="width: 30%;margin-left: 35%;margin-top: 50px;">
      <div slot="header" class="clearfix">
        <span>品牌：</span>
        <span style="color: #ED0918;font-size: large;">{{carInfo.brand}}</span>
      </div>

      <el-image :src="carInfo.img" style="width: 220px;margin: 15px;height: 150px;float: left;">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>

      <div style="padding: 14px;">
        <div class="div-margin">
          售价：<span>{{carInfo.cx_price}}</span>
        </div>
        <div class="div-margin">
          车型：<span>{{carInfo.level}}</span>
        </div>
        <div class="div-margin">
          排量：<span>{{carInfo.cehicle_capacity}}</span>
        </div>
        <div class="div-margin">
          评分：<span>{{carInfo.rating}}</span>
        </div>
      </div>
    </el-card>

    <el-card :body-style="{ padding: '0px' }" style="margin-top: 20px;width: 80%;margin-left: 10%;">
      <div slot="header" class="clearfix">
        <span>猜你喜欢...</span>
      </div>
      <div v-for="item in recommend" :key="item.id" class="text item" style="padding-left: 8%;">
        <div style="float: left;margin-bottom: 10px;">
          <el-image :src="item.img" style="width: 220px;margin: 15px;height: 150px;">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
          <div style="text-align: center;">
            <el-link type="success" v-on:click="to_detail(item.id);">{{item.brand}}</el-link>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        carInfo: {
          img: "",
          brand: "",
          cx_price: "",
          level: "",
          rating: "",
          cehicle_capacity: ""
        },
        recommend: []
      }
    },
    methods: {
      getCarDetail(id) {
        this.$axios.get("/api/get_car_detail", {
          params: {
            "carid": id
          }
        }).then(response => {
          if (response.data) {
            this.carInfo = response.data;
            setTimeout(() => {
              this.getRecommendList();
            }, 1000);
          }
        });
      },
      getRecommendList() {
        this.$axios.get("/api/get_recommend_list").then(response => {
          if (response.data.car_rec_list) {
            this.recommend = response.data.car_rec_list;
          }
        });

      }
    },
    created() {
      this.getCarDetail(this.$route.query.id);
    }
  }
</script>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .div-margin {
    margin: 10px;
  }

  .div-margin span {
    font-size: 20px;
    color: #273227;
  }
</style>
